<template>
  <view class="container">
    <tui-list-view title="用户反馈的书籍源：">
      <tui-list-cell v-for="(book,index) in books" :key="index">
        <view class="tui-flex tui-flex-column w-100">
          <view class="filed-row" style="margin-bottom:5upx;">
            <text class="filed-name">联系邮箱：</text>
            {{book.email}}
            <view @tap="paste(book.email)" class="paste-btn" hover-class="tui-opcity">
              <image mode="widthFix" style="width:100%" src="/static/images/my/copy.png" />
            </view>
          </view>
          <view class="filed-row">
            <text class="filed-name">书籍链接：</text>
            {{book.url}}
            <view @tap="paste(book.url)" class="paste-btn" hover-class="tui-opcity">
              <image mode="widthFix" style="width:100%" src="/static/images/my/copy.png" />
            </view>
          </view>
          <view class="filed-row">
            <tui-button type="danger" size="small" @click="deleteBook(book,index)">删除</tui-button>
          </view>
        </view>
      </tui-list-cell>
    </tui-list-view>
    <uni-pagination :current="pageIndex+1" :pageSize="pageSize" :total="total" @change="goPage" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import tuiListView from "@/components/list-view/list-view.vue";
import tuiListCell from "@/components/list-cell/list-cell.vue";
import uniPagination from "@/components/uni-pagination/uni-pagination.vue";
import tuiButton from "@/components/button/button.vue";
export default {
  components: {
    tuiListView,
    tuiListCell,
    uniPagination,
    tuiButton
  },
  data() {
    return {
      books: [],
      pageIndex: 0,
      pageSize: 10,
      total: 0
    };
  },
  computed: mapState(["config"]),
  onLoad() {
    if (!this.config.admin) {
      this.tui.toast("您不是管理员！");
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        });
      }, 1000);
      return;
    }
    this.init();
  },
  methods: {
    init() {
      uni.showLoading({
        title: "加载中"
      });
      this.db
        .collection("feedback")
        .skip(this.pageIndex * 10)
        .limit(10)
        .orderBy("created_at", "desc")
        .get()
        .then(res => {
          //   console.log("res", res);
          uni.hideLoading();
          if (res.errMsg == "collection.get:ok") {
            this.books = res.data;
          } else {
            this.tui.toast(res.errMsg);
          }
        })
        .catch(e => {
          console.error(e);
          uni.hideLoading();
        });
    },
    goPage({ type, current }) {
      // console.log(type, current);
      this.pageIndex = current - 1;
      this.$nextTick(this.init);
    },
    paste(data) {
      uni.setClipboardData({
        data,
        success: () => {
          this.tui.toast("复制成功");
        }
      });
    },
    deleteBook(book, index) {
      //   console.log("book", book);
      uni.showLoading({
        title: "加载中"
      });
      this.db
        .collection("feedback")
        .doc(book._id)
        .remove()
        .then(res => {
          //   console.log("res", res);
          uni.hideLoading();
          if (res.errMsg == "document.remove:ok") {
            this.tui.toast("删除成功");
            this.books.splice(index, 1);
          } else {
            this.tui.toast(res.errMsg);
          }
        })
        .catch(e => {
          console.error(e);
          uni.hideLoading();
        });
    }
  }
};
</script>

<style>
.filed-name {
  color: #9b9b9b;
}
.paste-btn {
  display: inline-block;
  width: 50upx;
}
.filed-row {
  line-height: 50upx;
  width: 100%;
  word-break: break-all;
}
</style>